<template>
  <div class="relative flex w-full flex-col">
    <div class="absolute right-0 top-0 my-2 flex justify-end px-4 py-2">
      <div class="flex gap-2 opacity-25 hover:opacity-100">
        <span
          class="btn btn-circle btn-sm tooltip"
          data-tip="源码"
          @click="modeChange('source')"
        >
          <span class="icon-[uil--file-edit-alt] h-6 w-6"></span>
        </span>
        <span
          class="btn btn-circle btn-sm tooltip"
          data-tip="预览"
          @click="modeChange('preview')"
        >
          <span class="icon-[uil--file-search-alt] h-6 w-6"></span>
        </span>
        <span
          class="btn btn-circle btn-sm tooltip"
          data-tip="源码和预览"
          @click="modeChange('all')"
        >
          <span class="icon-[uil--columns] h-6 w-6"></span>
        </span>
      </div>
    </div>
    <div class="flex h-full w-full flex-1 rounded border bg-base-100 p-2">
      <textarea
        v-show="mode != 'preview'"
        class="textarea textarea-bordered h-full w-1/2 resize-x"
        :style="[mode == 'source' ? { width: '100%' } : {}]"
        :value="modelValue"
        @input="onInput"
      />
      <div class="h-full flex-1 overflow-y-scroll">
        <ZMdView
          v-show="mode != 'source'"
          class="prose p-2"
          :content="modelValue"
          html
          xhtml-out
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";
import ZMdView from "../ZMdView.vue";

type Mode = "all" | "source" | "preview";
interface Props {
  modelValue?: string;
}

withDefaults(defineProps<Props>(), {
  modelValue: "",
});

const emit = defineEmits<{
  "update:modelValue": [value: string];
  "update:mode": [value: Mode];
}>();

const mode = ref<Mode>("source");
const modeChange = (val: Mode) => {
  mode.value = val;
};
const onInput = useDebounceFn((e: Event) => {
  emit("update:modelValue", (e.target as HTMLTextAreaElement).value);
}, 200);
</script>
<style></style>
